<script setup lang="ts">
  import { useId } from 'vue';
  import { Message } from '@arco-design/web-vue';

  const props = withDefaults(
    defineProps<{
      mode: 'detail' | 'edit' | 'add';
      title?: string;
      modalName?: string;
      deleteText?: string;
      onDelete?: () => Promise<any>;
      okLoading?: boolean;
      cancelLoading?: boolean;
    }>(),
    {
      modalName: '',
      okLoading: false,
      cancelLoading: false,
      deleteText: '确认删除吗？',
    }
  );

  const emits = defineEmits(['save', 'cancel', 'edit']);

  const onBeforeDelete = () => {
    return props
      .onDelete?.()
      .then(() => {
        Message.success('删除成功！');
        return true;
      })
      .catch(() => false);
  };

  const containerId = useId();
</script>

<template>
  <a-drawer
    :id="containerId"
    position="right"
    width="400px"
    class="detail-drawer"
    :data-mode="mode"
    v-bind="$attrs"
    :title="title"
    @cancel="emits('cancel')"
  >
    <template #default>
      <slot name="default" />
    </template>
    <template #footer>
      <a-space v-if="mode === 'detail'" key="on-detail" size="medium">
        <!-- @ts-ignore -->
        <a-popconfirm
          :popup-container="'#' + containerId"
          type="warning"
          :on-before-ok="onBeforeDelete"
        >
          <template #content>
            <div class="fle flex-col w-[200px]">
              <span class="font-semibold"> 确认删除该{{ modalName }}吗？ </span>
              <span class="text-[13px]" style="color: #333333">
                {{ deleteText }}
              </span>
            </div>
          </template>
          <ae-button purpose="delete"> 删除 </ae-button>
        </a-popconfirm>
        <ae-button purpose="edit" @click="emits('edit')"> 编辑 </ae-button>
      </a-space>

      <a-space v-else key="on-edit-or-add" size="medium">
        <ae-button
          purpose="cancel"
          :loading="cancelLoading"
          @click="emits('cancel')"
        >
          取消
        </ae-button>
        <ae-button purpose="save" :loading="okLoading" @click="emits('save')">
          保存
        </ae-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<style lang="less">
  .detail-drawer[data-mode='detail'] {
    .arco-form {
      .arco-form-item-label-required-symbol {
        display: none;
      }

      .arco-input-disabled {
        cursor: unset !important;
      }

      .arco-input-wrapper .arco-input[disabled] {
        -webkit-text-fill-color: var(--color-text-1) !important;
      }

      .arco-input-wrapper .arco-input[disabled]::placeholder {
        -webkit-text-fill-color: transparent !important;
        color: transparent;
      }

      .arco-textarea[disabled] {
        -webkit-text-fill-color: var(--color-text-1) !important;
      }

      .arco-textarea[disabled]::placeholder {
        -webkit-text-fill-color: transparent !important;
        color: transparent;
      }

      .arco-input-wrapper.arco-input-disabled {
        background-color: var(--color-fill-1) !important;
      }

      .arco-picker-disabled input[disabled] {
        -webkit-text-fill-color: var(--color-text-1) !important;
      }

      .arco-select-view-disabled {
        -webkit-text-fill-color: var(--color-text-1) !important;
        background-color: var(--color-fill-1) !important;
      }

      .arco-select-view-suffix {
        display: none;
      }
    }
  }
</style>
